<template>
  <div>
    <a-popover
      v-if="showData"
      title
      :arrow-point-at-center="true"
      auto-adjust-overflow
      placement="right"
      destroy-tooltip-onhide
      overlay-class-name="bpm-x6chart-node-popover"
      :get-popup-container="(triggerNode) => getContainer(triggerNode)"
    >
      <template #content>
        <a-spin :spinning="popoverSpinning" class="bpm-x6chart-node-box" :style="{ width: popoverWidth + 'px' }">
          <div class="table-box">
            <div class="node">
              <span class="name">节点:</span>
              {{ showData.alias }}
            </div>
            <div class="node">
              <span class="name">响应人:</span>
              {{ showData.userText }}
            </div>
            <div class="node">
              <span class="name">响应时间:</span>
              {{ showData.nodeStatus == 'run' ? '--' : showData.userEndTime }}
            </div>
            <div class="node">
              <span class="name">响应周期:</span>
              {{ showData.nodeStatus == 'run' ? '--' : showData.userConsumeTime }}
            </div>
          </div>
        </a-spin>
      </template>
      <slot />
    </a-popover>
    <div v-if="!showData"><slot /></div>
  </div>
</template>

<script>
import { Popover, Spin } from 'ant-design-vue';
const tableColumns = [
  {
    title: '接收人',
    dataIndex: 'assigneeName',
    ellipsis: true
  },
  {
    title: '处理人',
    dataIndex: 'operateUserName',
    ellipsis: true
  },
  {
    title: '操作类型',
    dataIndex: 'opType',
    ellipsis: true
  },
  {
    title: '意见',
    dataIndex: 'message',
    ellipsis: true
  },
  {
    title: '时间',
    dataIndex: 'eTime',
    ellipsis: true,
    width: 150
  }
];
export default {
  name: 'AvicNodePopover',
  components: {
    ASpin: Spin,
    APopover: Popover
  },
  props: {
    popoverHistActivity: {
      type: Object,
      default: null
    },
    showData: {
      type: Object,
      default: null
    },
    popoverData: {
      type: Array,
      default: null
    },
    popconfirmId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      popoverSpinning: false,
      popoverWidth: '600',
      placement: 'right',
      tableStyle: { marginTop: '5px', height: '150px' },
      tableColumns,
      responseUser: ''
    };
  },
  methods: {
    getContainer() {
      if (this.popconfirmId) {
        const doc = document.getElementById(this.popconfirmId);
        return doc;
      }
      return document.body;
    }
  }
};
</script>

<style scoped lang="less">
.bpm-x6chart-node-popover {
  .ant-popover-inner-content {
    padding: 0;
  }
  :deep(.ant-spin-container) {
    display: flex;
  }

  .table-box {
    display: flex;
    flex: 1;
    width: auto;
    flex-direction: column;
    .node {
      flex: 1;
      .name {
        width: 20px;
      }
    }
  }
  .table-content {
    height: 150px;
    min-height: 86px;
    overflow: hidden;
  }
}
</style>
